<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变 - 不同尺寸大小关键字的使用</title>
<style type="text/css">
div.closest-side {
	width: 300px; height: 200px; margin: 50px;
	background: -webkit-radial-gradient(30% 70%, closest-side, red, blue);
	background:    -moz-radial-gradient(30% 70%, closest-side, red, blue);
	background:      -o-radial-gradient(30% 70%, closest-side, red, blue);
	background:         radial-gradient(30% 70%, closest-side, red, blue);
}
div.farthest-side {
	width: 300px; height: 200px; margin: 50px;
	background: -webkit-radial-gradient(30% 70%, farthest-side, red, blue);
	background:    -moz-radial-gradient(30% 70%, farthest-side, red, blue);
	background:      -o-radial-gradient(30% 70%, farthest-side, red, blue);
	background:         radial-gradient(30% 70%, farthest-side, red, blue);
}
div.closest-corner {
	width: 300px; height: 200px; margin: 50px;
	background: -webkit-radial-gradient(30% 70%, closest-corner, red, blue);
	background:    -moz-radial-gradient(30% 70%, closest-corner, red, blue);
	background:      -o-radial-gradient(30% 70%, closest-corner, red, blue);
	background:         radial-gradient(30% 70%, closest-corner, red, blue);
}
div.farthest-corner {
	width: 300px; height: 200px; margin: 50px;
	background: -webkit-radial-gradient(30% 70%, farthest-corner, red, blue);
	background:    -moz-radial-gradient(30% 70%, farthest-corner, red, blue);
	background:      -o-radial-gradient(30% 70%, farthest-corner, red, blue);
	background:         radial-gradient(30% 70%, farthest-corner, red, blue);
}
</style>
</head>
<body>
<div class="closest-side"></div>
<div class="farthest-side"></div>
<div class="closest-corner"></div>
<div class="farthest-corner"></div>
</body>
</html>